<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules"  :inline="true">
      <div>
        <el-form-item label="编号" prop="number">
          <el-input v-model="form.numberNum" disabled style="width: 280px;" />
        </el-form-item>
        <el-form-item label="公司名称" prop="company">
          <el-input v-model="form.company" disabled style="width: 280px;" />
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker
            clearable
            v-model="form.startDate"
            type="datetime"
            value-format="yyyy-MM-dd"
            placeholder="请选择开始日期"
            :disabled="isdisabled"
            default-time="00:00:00"
            @change="dateChanged"
            :picker-options="pickerOptionStart"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            clearable
            v-model="form.endDate"
            type="datetime"
            value-format="yyyy-MM-dd"
            placeholder="请选择结束时间"
            default-time="23:59:59"
            :disabled="isdisabled"
            @change="dateChanged"
            :picker-options="pickerOptionEnd"
          ></el-date-picker>
        </el-form-item>
      </div>
      <el-form-item label="内容">
        <el-input
          v-model="form.content"
          :disabled="isdisabled"
          placeholder="项目负责人/项目开发人员"
          style="width: 280px;"
        />
      </el-form-item>
      <el-form-item label="费用类型" prop="costType">
        <el-select
          v-model="form.costType"
          placeholder="请选择费用类型"
          @change="costTypeChange"
          :disabled="isdisabled"
        >
          <el-option
            v-for="dict in dict.type.travel_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName" v-if="form.costType=='project_pay'">
        <el-select
          v-model="form.projectName"
          :disabled="title!='添加费用预算申请'"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in projectNameList"
            :key="item.projectName"
            :label="item.projectName"
            :value="item.projectName"
          ></el-option>
        </el-select>
      </el-form-item>
      <div>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" :disabled="isdisabled" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="所属部门" prop="belongDept">
          <el-input v-model="form.belongDept" :disabled="isdisabled" placeholder="请输入所属部门" />
        </el-form-item>
      </div>
      <el-form-item label="预算清单">
        <el-button
          type="primary"
          :disabled="isdisabled"
          icon="el-icon-plus"
          size="mini"
          @click="applayaddRow(applyList)"
        >添加清单</el-button>
      </el-form-item>
      <el-table ref="table" :data="applyList" style="width: 100%;margin-bottom:0.125rem" border>
        <el-table-column label="序号" align="center" width="55" prop="xh" type="index"></el-table-column>
        <el-table-column prop="budgetContent" label="预算内容" align="center" width="600">
          <template slot-scope="scope">
            <el-input v-model="scope.row.budgetContent" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="smallLetter" label="金额小写(元)" align="center" width="180">
          <template slot-scope="scope">
            <el-input
              @input="scope.row.smallLetter=scope.row.smallLetter.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              v-model="scope.row.smallLetter"
              :disabled="isdisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="capitalization" label="金额大写" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.capitalization" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fundHandler" label="经费经办人" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fundHandler" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="applaydeleteRow(scope.$index, applyList)"
              :disabled="isdisabled"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-form-item label="合计(元)" prop="payeeTotal" label-width="130px">
          <el-input v-model="form.payeeTotal" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="总额大写" prop="payeeCapitalization" >
          <el-input v-model="form.payeeCapitalization" disabled placeholder="请输入" />
        </el-form-item>
      </div>
      <!--            <el-form-item label="预算列表" prop=" budgetList">-->
      <!--              <el-input :disabled='isdisabled' v-model="form. budgetList" type="textarea" placeholder="请输入内容" />-->
      <!--            </el-form-item>-->
    </el-form>
    <div
      v-show="parentTaskId===null&&confirmVisible"
      class="dialog-footer"
      style="text-align:center"
    >
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <div
      v-show="parentTaskId==null&&!confirmVisible"
      class="dialog-footer"
      style="text-align:right"
    >
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify
      ref="verifyRef"
      :taskId="taskId"
      :deptId="dept.deptId"
      @submitCallback="submitCallback"
      :componentName="componentName"
      :taskVariables="taskVariables"
      :sendMessage="sendMessage"
    ></verify>
  </div>
</template>

<script>
import { getFinanceBudget, getProjectList } from "@/api/oa/financeBudget";
import verify from "@/components/Process/Verify";
import { parseTime } from "@/utils/ruoyi";
export default {
  name: "FinanceBudgetForm",
  dicts: ["travel_type"],
  components: {
    verify
  },
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String, // 任务id
    confirmVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      componentName: "预算申请",
      title: "",
      isdisabled: true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      projectNameList: [],
      applyList: [],
      // 出差日期的可选范围
      pickerOptionStart: {
        disabledDate: time => {
          if (this.form.endDate) {
            return time.getTime() > new Date(this.form.endDate).getTime();
          }
          return time.getTime() <= new Date();
        }
      },
      pickerOptionEnd: {
        disabledDate: time => {
          if (this.form.startDate) {
            return time.getTime() < new Date(this.form.startDate).getTime();
          }
          return time.getTime() <= new Date();
        }
      },
      // 表单校验
      rules: {
        startDate: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        costType: [
          { required: true, message: "费用类型不能为空", trigger: "change" }
        ],
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        belongDept: [
          { required: true, message: "所属部门不能为空", trigger: "blur" }
        ],
        budgetList: [
          { required: true, message: "预算列表不能为空", trigger: "blur" }
        ]
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},
      processKey: "oa_finance_budget",
      dept: ""
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler(newVal) {
        if (newVal) {
          this.getById();
        }
      }
    }
  },
  mounted() {
    if (
      this.$store.state.user.roles[0] == "common" ||
      this.$store.state.user.roles[0] == "board"
    ) {
      this.dept = this.$store.state.user.dept
        ? this.$store.state.user.dept
        : "";
    }
  },
  methods: {
    submitCallback() {
      this.$emit("closeForm");
    },
    costTypeChange() {
      this.form.projectName = undefined;
      this.getProjectList();
    },
    async getById() {
      const { data } = await getFinanceBudget(this.businessKey);
      this.form = data;
      if (data.actBusinessStatus.createTime) {
        this.form.numberNum =
          this.processKey +
          "@" +
          parseTime(data.actBusinessStatus.createTime, "{y}{m}{d}{h}{i}{s}");
      }
      this.applyList = JSON.parse(data.budgetList);
      this.form.company = "江苏华琛能源发展有限公司";
    },
    /*日期范围控件选择完毕*/
    dateChanged() {
      if (this.form.startDate != null && this.form.endDate != null) {
        let val = dayjs(this.form.endDate).diff(
          dayjs(this.form.startDate),
          "days"
        );
        this.form.duration = val < 0 ? val : val + 1;
      }
    },
    getProjectList() {
      getProjectList().then(res => {
        this.projectNameList = res.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      getFinanceBudget(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userRole: this.$store.state.user.roles[0],
          payeeCapitalization: Math.round(this.form.payeeTotal * 100) / 100
        };
        this.sendMessage = {
          title: "预算申请审批提醒",
          messageContent: this.$store.state.user.nickName + "审批通过了预算申请"
        };
      });
      this.$refs.verifyRef.visible = true;
      this.$refs.verifyRef.reset();
    }
  }
};
</script>
<style scoped>
/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 横向滚动条 */
  height: 8px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde;
  border-radius: 3px;
}
#selectForm >>> .el-form-item__label {
  font-size: 12px;
}
::v-deep .bjsm .el-form-item__content {
  width: calc(100% - 130px) !important;
}
</style>
